<template>
  <el-form :label-position="labelPosition" label-width="auto" :model="formLabelAlign" v-if="!loading"
    style="max-width: 600px;margin: 0 auto;">
    <el-form-item label="账号" :label-position="itemLabelPosition">
      <el-input v-model="formLabelAlign.username" />
    </el-form-item>
    <el-form-item label="密码" :label-position="itemLabelPosition">
      <el-input v-model="formLabelAlign.password" type="password" />
    </el-form-item>
    <el-form-item label="验证码" :label-position="itemLabelPosition">
      <div style="">
        <el-input style="float: left;display: inline;" v-model="formLabelAlign.code" />
        <img :src="codeUrl" class="login-code-img" style="width: 100px; height: 50px; float: left; display: inline;" />
      </div>


    </el-form-item>
    <el-button @click="login">登录</el-button>
  </el-form>

</template>

<script lang="ts" setup>
import { onBeforeMount, reactive, ref } from 'vue'
import type { FormItemProps, FormProps } from 'element-plus'
import axios from 'axios'
import { portalInstance } from '@/utils/request'
import { useRouter } from 'vue-router'

const labelPosition = ref<FormProps['labelPosition']>('right')
const itemLabelPosition = ref<FormItemProps['labelPosition']>('')
const formLabelAlign = reactive({
  username: '',
  password: '',
  code: '',
  uuid: 'x',
})

const loading = ref(true)

const codeUrl = ref('')
const token = ref('')
const router = useRouter()

onBeforeMount(async () => {
  // const resp = await portalInstance.get(`/captchaImage`)
  const resp = await axios.get(`${window.PORTAL_API_URL}/captchaImage`)
  // const resp = await axios.get(`http://localhost:9877/captchaImage`)
  codeUrl.value = "data:image/gif;base64," + resp.data.data.img;
  formLabelAlign.uuid = resp.data.data.uuid
  loading.value = false
})

const login = async () => {
  console.log(formLabelAlign)
  formLabelAlign.password = btoa(formLabelAlign.password)
  const resp = await axios.post(`${window.PORTAL_API_URL}/login`, { ...formLabelAlign })
  token.value = resp.data.data.token
  localStorage.setItem('token', token.value)
  router.push('/')
}
</script>
